<script setup>
import {ref} from 'vue';
import {InboxOutlined} from '@ant-design/icons-vue';
import FloorOperationModal from '@/components/func/floorOperationModal.vue';

const importDxfFile = ref(); // 上传的文件列表
const dxfError = ref(''); // 错误信息
const dxfFileData = ref(); // 解析的dxf数据

const importModalVisible = ref(false);
const mapModalVisible = ref(false);
const dxfContainerRef = ref();
const emits = defineEmits(['save']);
const importOk = ref(false);

const importFile = () => {
  importModalVisible.value = true;
  importDxfFile.value = [];
};

const handleFileUpload = (info) => {
  const file = info.file;
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const contents = e.target.result;
      dxfFileData.value = {file, data: contents};
    } catch (err) {
      dxfError.value = `解析失败: ${err.message}`;
      console.error(err);
    }
  };

  reader.onerror = () => {
    dxfError.value = '文件读取失败';
    console.error(reader.error);
  };

  reader.readAsText(file); // 以文本形式读取文件
  mapModalVisible.value = true;
  importOk.value = false;
};
</script>

<template>
  <div class="dfx-container" ref="dxfContainerRef">
    <a-button type="primary" @click="importFile" style="background: #02a602">导入dxf文件</a-button>
    <a-modal
        v-model:open="importModalVisible"
        title="导入文件"
        :footer="false"
        :getContainer="() => dxfContainerRef"
    >
      <a-upload-dragger
          accept=".dxf"
          v-model:file-list="importDxfFile"
          :max-count="1"
          :before-upload="() => false"
          @change="handleFileUpload"
      >
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">点击或者拖拽文件进行导入</p>
      </a-upload-dragger>
    </a-modal>
    <!-- 地图弹窗 -->
    <!-- <floor-operation-modal
        is-import
        :parent-node="dxfContainerRef"
        v-model:visible="mapModalVisible"
        :dxf-data="dxfFileData"
        @save="emits('save',!(importModalVisible = false))"
    /> -->
  </div>
</template>

<style lang="scss" scoped>
.dfx-container {
  padding: 10px;

  .ant-btn {
    &:hover {
      filter: saturate(1.5);
    }
  }
}
</style>
